<template>
	<cover-view class="xweek_box">
		<cover-view class="xweek_title">
			<cover-view v-for="item in weekDay">{{item}}</cover-view>
		</cover-view>
		<cover-view class="xweek_day">
			<cover-view class="day_body" :class="dayClass">
				<cover-view class="day" v-for="(item,index) in days" :key="index">
					<cover-view :class="item.sel?'sel':'wu'" @tap="change(item)">{{item.d}}</cover-view>
				</cover-view>
			</cover-view>
		</cover-view>
	</cover-view>
</template>

<script>
	export default {
		data() {
			return {
				y: '',
				m: '',
				d: '',
				thsDay: '',
				date: '',
				days: [],
				move: true,
				dayClass: '',
				weekDay: []
			}
		},
		created() {
			this.getDate(new Date().getDate())
		},
		methods: {
			getDate (day) {
				let time = new Date().getTime()
				let timeArr = []
				for (let i = 0; i < 7; i++) {
					timeArr.push({
						y: new Date(time).getFullYear().toString(),
						m: this.addZero(new Date(time).getMonth() + 1),
						d: this.addZero(new Date(time).getDate()),
						sel: day === new Date(time).getDate()
					})
					time -= 24 * 60 * 60 * 1000
				}
				timeArr.reverse()
				this.days = timeArr
				this.getWeekDay(timeArr)
			},
			addZero (num) {
				return num < 10 ? '0' + num.toString() : num.toString()
			},
			getWeekDay(timeArr) {
				let dayArr = []
				timeArr.forEach(item => {
					let day = new Date(`${item.y}-${item.m}-${item.d}`).getDay()
					switch(day) {
						case 0:
						dayArr.push('日')
						break
						case 1:
						dayArr.push('一')
						break
						case 2:
						dayArr.push('二')
						break
						case 3:
						dayArr.push('三')
						break
						case 4:
						dayArr.push('四')
						break
						case 5:
						dayArr.push('五')
						break
						case 6:
						dayArr.push('六')
						break
					}
				})
				this.weekDay = dayArr
			},
			init(date) {
				this.thsDay = date.getDate()
				this.date = this.format(date)
				this.setDays(date);
			},
			setDays(date) {
				let y = this.y = date.getFullYear(),
					m = this.m = date.getMonth(),
					d = this.d = date.getDate(),
					prevDate = new Date(y, m, d - 7),
					start = this.getWeek1(prevDate);
				this.days = [];
				for (let i = 0; i < 21; ++i) {
					let arr = start.split("-");
					this.days[i] = {
						y: arr[0],
						m: arr[1],
						d: arr[2],
						sel: arr[2] == this.thsDay
					};
					start = this.addDate(start, 1);
				}
			},
			change(d) {
				let date = new Date(d.y, d.m, d.d)
				this.getDate(date.getDate())
				this.$emit("back", `${d.y}-${d.m}-${d.d}`)
			},
			format(date) {
				let y = date.getFullYear();
				let m = date.getMonth() + 1;
				let d = date.getDate();
				return y + '-' + this.fill(m) + '-' + this.fill(d);
			},
			fill(a) {
				return 10 > a ? '0' + (0 | a) : a
			},
			getWeek(y, m, d) {
				return new Date(y, m, d).getDay();
			},
			getWeek1(date) {
				let nowTime = date.getTime();
				let day = date.getDay() == 0 ? 7 : date.getDay();
				let oneDayLong = 24 * 60 * 60 * 1000;
				let time = nowTime - (day - 1) * oneDayLong;
				let week1 = new Date(time);
				return this.format(week1);
			},
			addDate(date, days) {
				if (days == undefined || days == '') {
					days = 1;
				}
				var date = new Date(date);
				date.setDate(date.getDate() + days);
				let y = date.getFullYear();
				let m = date.getMonth() + 1;
				let d = date.getDate();
				return y + '-' + this.fill(m) + '-' + this.fill(d);
			},
			moveDay(y, m, d) {
				let date = new Date(y, m, d || this.d)
				this.setDays(date);
			},
			prevYear() {
				this.moveDay(this.y - 1, this.m)
			},
			nextYear() {
				this.moveDay(this.y + 1, this.m)
			},
			prevMonth() {
				this.moveDay(this.y, this.m - 1)
			},
			nextMonth() {
				this.moveDay(this.y, this.m + 1)
			},
			prevWeek() {
				if (this.move) {
					this.move = false;
					this.dayClass = "to_left";
					let ths = this;
					setTimeout(function() {
						ths.dayClass = "";
						ths.moveDay(ths.y, ths.m, ths.d - 7)
						ths.move = true;
					}, 1000)
				}
			},
			nextWeek() {
				if (this.move) {
					this.move = false;
					this.dayClass = "to_right";
					let ths = this;
					setTimeout(function() {
						ths.dayClass = "";
						ths.moveDay(ths.y, ths.m, ths.d + 1)
						ths.move = true;
					}, 1000)
				}
			}
		}
	}
</script>

<style>
	/* 周日期样式*/
	.xweek_box {
		width: 100%;
		background: #FFFFFF;
		color: #888;
		font-size: 12px;
		/* border-top: 2px solid #ffc122; */
		 position: relative;
	}

	.xweek_ym {
		font-size: 14px;
		line-height: 36px;
		border-bottom: 1px solid #dadada;
		cover-view-align: center;
	}

	.xweek_ym .ym_cover-view {
		margin: 0 30upx;
	}

	.xweek_ym .i {
		display: inline-block;
		width: 0;
		height: 0;
		border-color: transparent;
		border-style: dashed;
		border-width: 8px;
		margin-top: -3px;
		vertical-align: middle;
	}

	.xweek_ym .next_i {
		margin-right: 5px;
		border-left-color: #ffc122
	}

	.xweek_ym .prev_i {
		margin-left: 5px;
		border-right-color: #ffc122
	}

	.xweek_title {
		height: 30px;
		line-height: 30px;
	}

	.xweek_title cover-view {
		display: inline-block;
		width: 14.28%;
		text-align: center;
	}

	.xweek_day {
		overflow: hidden;
		position: relative;
		height: 32px;
	}

	.xweek_day .day_body {
		position: absolute;
		width: 300%;
		/* left: -100%; */
		line-height: 22px;
	}

	.xweek_day .day {
		cover-view-align: center;
		display: inline-block;
		width: 4.8%;
		height: 22px;
		line-height: 22px;
		color: #333333;
		font-size: 24rpx;
		font-weight: 500;
		text-align: center;
	}
   .xweek_day .wu {
	line-height: 22px;
	margin: 0 25.37%
    }
	.xweek_day .sel {
		display: inline-block;
		width: 22px;
		height: 22px;
		line-height: 22px;
		text-align: center;
		background: rgb(24,177,127);
		border-radius: 50%;
		color: #fff;
		margin: 0 19.8%
	}

	.to_left {
		animation: toLeft 1s ease-in infinite;
	}

	.to_right {
		animation: toRight 1s ease-in infinite;
	}

	@-webkit-keyframes toLeft {
		from {
			left: -100%;
		}

		to {
			left: 0%;
		}
	}

	@-webkit-keyframes toRight {
		from {
			left: -100%;
		}

		to {
			left: -200%;
		}
	}
</style>
